import request from '../../utils/request'

// pages/video/video.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        videoNavList: [],
        navActiveId: 0,
        videoList: [],
        videoId: '', // 存放播放的视频id
        videoPlayTime: [], // 存放播放过的视频进度
        isTriggered: false  // 下拉的标识
    },

    async getVideoNavData() {
        const res = await request('/video/group/list')
        const videoNavList = res.data.splice(0, 14)
        this.setData({
            videoNavList,
            navActiveId: parseInt(videoNavList[0].id)
        })

        // 当获取完导航列表数据后，请求一次视频列表数据
        this.getVideoListData(this.data.navActiveId)
    },

    async getVideoListData(id) {
        const res = await request('/video/group', {
            id
        })
        wx.hideLoading()
        this.setData({
            videoList: res.datas,
            isTriggered: false  // 当下来刷新请求完成时，关闭下拉状态
        })
    },

    handleTap(e) {
        // 使用id属性向event传参的类型是string，使用data-xxx自定属性向event传参的类型是参数属性
        this.setData({
            // navActiveId: parseInt(e.currentTarget.id)
            // 使用位移运算符也可以达到上面的那种效果
            navActiveId: e.currentTarget.id >>> 0,
            // 清空之前的视频列表数据
            videoList: []
        })
        // 需要更好的用户体验，加一个正在加载提示（需要调用wxwx.hideLoading()方法进行关闭提示弹窗）
        wx.showLoading({
            title: '正在加载',
            mask: true
        })
        // 当切换导航栏时，发送请求切换视频
        this.getVideoListData(this.data.navActiveId)
    },

    // 处理视频播放
    handlePlay(e) {
        let vid = e.currentTarget.id
        // // 关闭上一个播放的视频
        // this.vid && this.videoContent && this.videoContent.stop()
        // // 为了解决同一个视频，不能重复播放的问题
        // this.vid = vid
        // 使用image优化化就不需要上面那一步了，因为是只能保存一个videoId

        this.setData({
            videoId: vid
        })
        // 创建控制video标签的实例对象
        this.videoContent = wx.createVideoContext(vid)
        // 需要判断是否有播放记录
        const {
            videoPlayTime
        } = this.data
        const videoItem = videoPlayTime.find(item => item.vid === vid)
        if (videoItem) {
            this.videoContent.seek(videoItem.currentTime)
        } else {
            // 解决点击后播放视频
            this.videoContent.play()
        }
    },

    // 使用bindtimeupdate绑定事件，获取到视频播放进度
    handlePlayTime(e) {
        // 进度时间在e.detail.currentTime中, 总时长是在e.detail.duration
        const playTimeObj = {
            vid: e.currentTarget.id,
            currentTime: e.detail.currentTime
        }
        const {
            videoPlayTime
        } = this.data
        // 这里因为是每250ms记录一次，所以需要判断，使其不能重复记录，只能更新数据
        let videoPlayItem = videoPlayTime.find(item => item.vid === playTimeObj.vid)
        // videoPlayItem有内容说明之前有记录，所以只需要更新时间即可
        if (videoPlayItem) {
            videoPlayItem.currentTime = e.detail.currentTime
        } else {
            // 没有就直接添加到videoPlayTime数组中
            videoPlayTime.push(playTimeObj)
        }
        this.setData({
            videoPlayTime
        })
    },

    // 使用bindended绑定事件，获取到播放完成的事件
    handleEnded(e) {
        // 当视频播放完成后，将清空相应的播放记录
        const {videoPlayTime} = this.data
        let index = videoPlayTime.findIndex(item => item.vid === e.currentTarget.id)
        videoPlayTime.splice(index, 1)
        this.setData({
            videoPlayTime
        })
    },

    // 下拉刷新触发事件
    handleRefresh() {
        this.getVideoListData(this.data.navActiveId)
    },

    // 上拉加载事件
    handleTolower() {
        console.log('加载中');
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.getVideoNavData()
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})